<template>
   <div>咨询信息</div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="title"
        
        width="800"
        
      >
        <template #default="{ row }">
          <a
            href="https://yz.chsi.com.cn/kyzx/jybzc/202309/20230915/2293123516.html"
            @mouseover="hoverItem(row)"
            @mouseleave="leaveItem()"
            @click="gotoPage(row.link)"
          >
            {{ row.title }}
          </a>
        </template>
      </el-table-column>
    </el-table>

</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

export default {
  name: "CounselingMessage",
  setup() {
    const tableData = ref([
      { title: '教育部关于印发《2024年全国硕士研究生招生工作管理规定》的通知', link: '/page1' },
      { title: '教育部办公厅 农业农村部办公厅 中国科协办公厅关于支持建设第二批科技小院及科技小院集群的通知', link: '/page2' },
      { title: '教育部办公厅 农业农村部办公厅 中国科协办公厅关于支持建设第二批科技小院及科技小院集群的通知', link: '/page2' },
      { title: '教育部办公厅 农业农村部办公厅 中国科协办公厅关于支持建设第二批科技小院及科技小院集群的通知', link: '/page2' },
      { title: '教育部办公厅 农业农村部办公厅 中国科协办公厅关于支持建设第二批科技小院及科技小院集群的通知', link: '/page2' },
      { title: '教育部办公厅 农业农村部办公厅 中国科协办公厅关于支持建设第二批科技小院及科技小院集群的通知', link: '/page2' },
      { title: '教育部办公厅 农业农村部办公厅 中国科协办公厅关于支持建设第二批科技小院及科技小院集群的通知', link: '/page2' },
      { title: '教育部办公厅 农业农村部办公厅 中国科协办公厅关于支持建设第二批科技小院及科技小院集群的通知', link: '/page2' },{ title: '教育部办公厅 农业农村部办公厅 中国科协办公厅关于支持建设第二批科技小院及科技小院集群的通知', link: '/page2' },
      { title: '教育部办公厅 农业农村部办公厅 中国科协办公厅关于支持建设第二批科技小院及科技小院集群的通知', link: '/page2' },
      { title: '2024年国家助学贷款免息及本金延期偿还如何操作官方解读', link: '/page3' }
      // 可以根据需要添加更多的动态
    ]);

    const hoveredRow = ref(null);
    const router = useRouter();

    const hoverItem = (row) => {
      hoveredRow.value = row;
    };

    const leaveItem = () => {
      hoveredRow.value = null;
    };

    const gotoPage = (link) => {
      router.push(link);
    };

    return { tableData, hoveredRow, hoverItem, leaveItem, gotoPage };
  },
};
</script>
<style scoped>
a {
  font-size: 24px; /* 设置链接字体大小 */
  text-decoration: none; /* 移除链接的下划线 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 溢出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */

}

a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
</style>